iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
0
自我挑戰組

程式翻轉-API學習從無到有(有嗎?)系列 第 8

DAY 8 Google Map Api體驗(一)

  • 分享至 

  • xImage
  •  

看到標題大家相信都有點興奮與期待吧~~
事實上我第一次用這支API是我在上課的時候
那時候我就覺得
哇~~
這也太猛了吧
所以後來專題的時候我就有用
但是真正實做的時候發現事實上沒有想像中的那麼難

亞里士多德:一切學習都是從模仿開始的

所以我們想要寫出這麼偉大的API當然要從偉大的API開始學習阿
一定有人會問 API不是只提供接口嗎(又看不到裡面的方法
所以不准問(我絕對不會說我沒靈感了

要用google api 先要有金鑰

沒錯,不管你是要用google的甚麼API
都要先申請一組金鑰
實際流程請參考這一篇文章
從 Google Developers Console 取得開發者用的 API 金鑰
這邊就是涉及權限的部分(我們要去學習的地方
這金鑰不只會讓我們執行Google API還會計算我們的使用次數(我記得是1000/日
如果超過就要收費啦(就是我第一篇文章提到的部分

<script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="http://maps.google.com/maps?file=api&v=2&key=API_KEY" type="text/javascript"></script>
    <script type="text/javascript">
        var geocoder;
        var map;
        var address = "@ViewBag.Gmap";

        map=new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        geocoder=new GClientGeocoder();
        geocoder.getLocations(address,addtoMap);

        function addtoMap(response){
            place=response.Placemark[0];
            point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
            map.setCenter(point, 13);
            marker = new GMarker(point);
            map.addOverlay(marker);
            marker.openInfoWindow(place.address);
        }

    </script>

這邊就是我JS的地方
由於這一部份我是有網上修改來的
但時間有點久遠
給不了出處(真的很抱歉/images/emoticon/emoticon21.gif

今天先這樣
明天我在解釋~~
就這樣囉~


上一篇
DAY 7 我對API不得不說的事
下一篇
DAY 9 Google Map Api體驗(二)
系列文
程式翻轉-API學習從無到有(有嗎?)12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言